<template>
  <EditDropDownLight dropdownTitle="盘点基本信息">
    <template v-slot:content>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">盘点计划编码</div>
            <div class="text">{{ planDetailData.takePlanCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点计划名称</div>
            <div class="text">{{ planDetailData.takePlanName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ planDetailData.classNameDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">盘点负责人</div>
            <div class="text">{{ planDetailData.takeStockPeopleName }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">备注</div>
            <div class="text">{{ planDetailData.remark }}</div>
          </div>
        </div>
      </div>
    </template>
  </EditDropDownLight>
  <EditDropDownLight dropdownTitle="执行周期">
    <template v-slot:content>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">执行方式</div>
            <div class="text">周期执行</div>
          </div>
          <div class="view-equip-item">
            <div class="label">开始时间</div>
            <div class="text">{{ planDetailData.execStartDate }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">结束时间</div>
            <div class="text">{{ planDetailData.execEndDate }}</div>
          </div>
        </div>
        <div>
          <div class="view-equip-content">
            <div class="view-equip-item plus">
              <div class="label">排查周期</div>
              <div v-if="['WEEK', 'MONTH'].includes(planDetailData.cyclePerUnit)" class="text">
                {{ dealExecTime() }}
                <px-tag v-for="item in weeks" :key="item" class="ml-[6px]" type="info">{{ item }}</px-tag>
                <px-tag v-for="item in days" :key="item" class="ml-[6px]" type="info">{{ item }}</px-tag>
              </div>
              <div v-else class="text">
                {{ dealExecTime() }}
                <px-tag v-for="item in months" :key="item" class="ml-[3px] mr-[3px]" type="info">{{ item }}</px-tag>
                的
                <px-tag v-for="item in days" :key="item" class="ml-[3px] mr-[3px]" type="info">{{ item }}</px-tag>
                日
              </div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">任务执行时间</div>
              <div class="text">
                <px-tag v-for="item in operateTimes" :key="item" class="mt-[3px] mr-[3px]" type="info">{{ item }}</px-tag>
              </div>
            </div>
            <div class="view-equip-item">
              <div class="label">执行时长</div>
              <div class="text">{{ `${planDetailData.execDuration}${unitList[planDetailData.execDurationUnit]}` }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">任务生成并提醒时间</div>
              <div class="text">{{ taskList[planDetailData.taskCreateTime] }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </EditDropDownLight>
  <EditDropDownLight dropdownTitle="工具盘点列表">
    <template v-slot:content>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">盘点范围</div>
            <div class="text">
              {{ planDetailData.takeStockScope === "all" ? "全面盘点" : "指定盘点" }}
            </div>
          </div>
        </div>
      </div>
      <px-table :data="planDetailData?.toolInfoDTOList" class="custom-table" max-height="300px" border>
        <px-table-column prop="toolCode" label="工具编码" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolName" label="工具名称" min-width="100" show-overflow-tooltip />
        <px-table-column prop="factoryAreaDesc" label="厂区" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolStatusDesc" label="工具状态" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <px-tag
              effect="plain"
              :style="{
                color: 'rgba(0, 0, 0, 0.8)',
                border: `1px solid ${tagBorderColorList[scope.row.toolStatus]}`,
                backgroundColor: `${tagBgColorList[scope.row.toolStatus]}`
              }"
            >
              {{ scope.row.toolStatusDesc }}
            </px-tag>
          </template>
        </px-table-column>
        <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolUnitDesc" label="工具单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolModel" label="型号/规格" min-width="120" show-overflow-tooltip />
        <px-table-column prop="brandVal" label="品牌" min-width="120" show-overflow-tooltip />
        <px-table-column prop="classNameDesc" label="工具科室" min-width="120" show-overflow-tooltip />
        <px-table-column prop="assetTagDesc" label="资产标签" min-width="120" show-overflow-tooltip />
      </px-table>
    </template>
  </EditDropDownLight>
</template>

<script setup lang="ts">
import EditDropDownLight from "@/views/all/equip/components/EditDropDownLight.vue";
import { ref, watch } from "vue";

// 父级传过来的值
const props = defineProps(["planDetailData"]);

const weeks = ref([]);
const days = ref([]);
const months = ref();
const operateTimes = ref([]);

const tagBorderColorList = {
  0: "#4CCBA1",
  1: "#F37272",
  2: "#F7B648",
  3: "#7997A8"
};

const tagBgColorList = {
  0: "#E8F8F3",
  1: "#FEECEC",
  2: "#FEF5E6",
  3: "#F7F7F7"
};

const weeksMap = {
  MONDAY: "星期一",
  TUESDAY: "星期二",
  WEDNESDAY: "星期三",
  THURSDAY: "星期四",
  FRIDAY: "星期五",
  SATURDAY: "星期六",
  SUNDAY: "星期日"
};

const monthArr = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);

const unitList = {
  DAY: "日",
  HOUR: "小时"
};

const taskList = ["", "准点生成", "提前10分钟", "提前30分钟", "提前1小时", "提前1天"];

const operateTimeArr = Array.from({ length: 24 }, (_, i) => (i < 10 ? `0${i}:00` : `${i}:00`));

watch(
  () => props.planDetailData,
  newVal => {
    if (newVal) {
      const { cycleTime: resCycleTime } = props.planDetailData;
      if (resCycleTime) {
        const arr = resCycleTime.split(",").sort((a, b) => a - b);
        operateTimes.value = arr.reduce((pre, cur) => {
          return [...pre, operateTimeArr[cur]];
        }, []);
      }
    }
  }
);

function dealExecTime() {
  if (props.planDetailData.cyclePerUnit === "DAY") {
    if (props.planDetailData.cyclePerNum) {
      return `每${props.planDetailData.cyclePerNum}天`;
    }
  } else if (props.planDetailData.cyclePerUnit === "WEEK") {
    if (props.planDetailData.cyclePerNum) {
      if (props.planDetailData.cycleValue) {
        let arr = props.planDetailData.cycleValue.split(",");
        Object.keys(weeksMap).forEach(item => {
          if (arr.includes(item)) {
            weeks.value.push(weeksMap[item]);
          }
        });
      }
      return `每${props.planDetailData.cyclePerNum}周的`;
    }
  } else if (props.planDetailData.cyclePerUnit === "MONTH") {
    if (props.planDetailData.cyclePerNum) {
      if (props.planDetailData.cycleValue) {
        let arr = props.planDetailData.cycleValue.split(",");

        days.value = arr.sort((a, b) => a - b);
      }
      return `每${props.planDetailData.cyclePerNum}月的`;
    }
  } else if (props.planDetailData.cyclePerUnit === "YEAR") {
    if (props.planDetailData.cycleValue) {
      const [month, day] = (props.planDetailData.cycleValue as string).split("-");
      if (day) {
        let arr: any[] = day.split(",");

        days.value = arr.sort((a, b) => a - b);
      }
      if (month) {
        let arr: any[] = month.split(",").sort((a: any, b: any) => a - b);

        months.value = arr.reduce((cur, pre) => {
          return [...cur, monthArr[Number(pre) - 1]];
        }, []);
      }
      return `每${props.planDetailData.cyclePerNum}年的`;
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
